<template>
  <div class="select-customer-dialog">
    <el-dialog :visible.sync="visible" width="48%" :before-close="handleClose">
      <div slot="title" style="font-size: 14px;font-weight: 500;">
        选择客户
      </div>
      <div class="select-customer-container">
        <div class="search-container">
          <div class="head">
            <span>筛选</span>
            <span style="cursor: pointer; color: rgb(51, 112, 255);">清空筛选</span>
          </div>
          <div class="search-column">
            <el-input v-model="queryParams.keyWord" class="search-input" size="small" placeholder="关键词搜索"
              suffix-icon="el-icon-search" />
            <el-select v-model="queryParams.basicInfo" filterable placeholder="请选择企微标签">
              <el-option v-for="item in wxLabelList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker v-model="queryParams.dateTime" type="datetime" placeholder="选择日期时间" style="width: 100%;">
            </el-date-picker>
            <el-select v-model="queryParams.userName5" @change="handleQuery" placeholder="请选择有无备注">
              <el-option v-for="item in callList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="queryParams.sex" placeholder="请选择备注" size="small">
              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="table-container">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="number" label="客户">
              <template slot-scope="scope">
                <div class="company-account">
                  <img class="account-cover" src="https://wework.qpic.cn/wwpic/177031_HhrnVYv6QQSgQ2C_1686909054/0" />
                  <div class="account-info">
                    <div class="name">闵雨微</div>
                    <div class="desc">@志新</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <template slot="empty">
              <TableEmpty />
            </template>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="dialog-footer-flex">
          <span>已选择：<span style="color: rgb(240, 139, 0);">0</span>客户</span>
          <div>
            <el-button @click="onClose">取消</el-button>
            <el-button type="primary" @click="onClose">确认</el-button>
          </div>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      status: '',
      queryParams: {
        keyWord: '',
        basicInfo: '',
        dateTime: '',
        sex: ''
      },
      tableData: [{ id: 1 }],
      wxLabelList: [
        //群查找
        { value: 1, label: "含任意标签" },
        { value: 2, label: "含所有标签" },
        { value: 3, label: "未打标签" },
      ],
      callList: [
        //称呼
        { id: 1, name: "有备注" },
        { id: 2, name: "无备注" },
      ],
      sexList: [
        //性别
        { id: 1, name: "男" },
        { id: 2, name: "女" },
        { id: 3, name: "未知" },
      ],
    }
  },
  props: ['visible'],
  methods: {
    onClose() {
      this.$emit('handCloseDialog');
    }
  },
}
</script>
<style lang="scss" scoped>
.select-customer-dialog {
  ::v-deep .el-dialog__body {
    padding: 0;
    background: #f5f5f5;
  }

  .select-customer-container {
    display: flex;

    .search-container {
      width: 220px;
      background-color: #f5f5f5;
      padding: 0 12px;

      .head {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .search-column {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
    }

    .table-container {
      flex: 1 1;
      min-height: 400px;
      background: #ffffff;

      .company-account {
        display: flex;
        align-items: center;

        .account-cover {
          width: 40px;
          height: 40px;
        }

        .account-info {
          margin-left: 8px;

          .name {
            font-size: 14px;
            line-height: 22px;
            color: #222333;
          }

          .desc {
            color: #52c41a;
            line-height: 22px;
          }
        }

        .accept-account {
          font-size: 14px;
          line-height: 22px;
        }
      }
    }
  }
  .dialog-footer-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 14px;
    }
  }
}
</style>